<template>
  <div class="info-btn-box" @click="onClick">
    <van-icon :name="icon" v-if="icon" />
    <slot>
      {{label}}
    </slot>
  </div>
</template>

<script>
export default {
  name: 'InfoBtn',
  data () {
    return {}
  },
  props: {
    label: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    to: {
      type: String,
      default: ''
    }
  },
  methods: {
    onClick (e) {
      if (this.to) {
        this.$router.push(this.to)
      } else {
        this.$emit('click', e)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.info-btn-box {
  flex: auto;
  padding: 12px 0;
  text-align: center;
  border-right: solid 1px #f5f5f5;
  font-size: 13px; color: #555;
  &:last-child {
    border-right: none;
  }
  &:active {
    color: #09f;
  }
}
</style>
